<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>消息通知 - 消防工程集团</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        body {
            background: #f5f5f5;
            padding-bottom: 20px;
        }
        .tab-active {
            color: #2563eb;
            border-bottom: 2px solid #2563eb;
        }
        .unread-dot {
            position: absolute;
            top: 0;
            right: 0;
            width: 8px;
            height: 8px;
            background: #ef4444;
            border-radius: 50%;
            border: 2px solid white;
        }
    </style>
</head>
<body>
    <!-- Header -->
    <div class="bg-gradient-to-r from-blue-600 to-blue-700 text-white px-4 py-4 flex items-center">
        <a href="home.html" class="mr-3">
            <i class="fas fa-arrow-left text-xl"></i>
        </a>
        <h1 class="text-lg font-semibold flex-1">消息通知</h1>
        <button onclick="markAllAsRead()" class="text-sm text-blue-100">
            <i class="fas fa-check-double mr-1"></i>全部已读
        </button>
    </div>

    <!-- Tabs -->
    <div class="bg-white border-b border-gray-200">
        <div class="flex">
            <button onclick="switchTab('all')" id="tab-all" class="flex-1 py-3 text-center font-semibold tab-active relative">
                全部
                <span class="ml-1 bg-red-500 text-white text-xs rounded-full px-2 py-0.5">8</span>
            </button>
            <button onclick="switchTab('approval')" id="tab-approval" class="flex-1 py-3 text-center font-semibold text-gray-500 relative">
                审批
                <span class="ml-1 bg-red-500 text-white text-xs rounded-full px-2 py-0.5">5</span>
            </button>
            <button onclick="switchTab('system')" id="tab-system" class="flex-1 py-3 text-center font-semibold text-gray-500 relative">
                系统
                <span class="ml-1 bg-red-500 text-white text-xs rounded-full px-2 py-0.5">3</span>
            </button>
        </div>
    </div>

    <!-- Tab Content: 全部 -->
    <div id="content-all" class="tab-content">
        <!-- Notification List -->
        <div class="mt-2 space-y-2 px-4">
            <!-- Unread Item 1 - Approval -->
            <a href="notification-detail.html" class="block bg-white rounded-xl shadow-sm p-4 relative">
                <div class="unread-dot"></div>
                <div class="flex items-start">
                    <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mr-3 flex-shrink-0">
                        <i class="fas fa-clipboard-check text-blue-600 text-xl"></i>
                    </div>
                    <div class="flex-1 min-w-0">
                        <div class="flex items-center justify-between mb-1">
                            <span class="text-sm font-semibold text-gray-800">审批通知</span>
                            <span class="text-xs text-gray-400">2分钟前</span>
                        </div>
                        <div class="text-sm text-gray-700 mb-1">您有新的采购申请待审批</div>
                        <div class="text-xs text-gray-500">消防栓采购申请 · 王工发起 · 金额：¥50,000</div>
                    </div>
                </div>
            </a>

            <!-- Unread Item 2 - System -->
            <a href="notification-detail.html" class="block bg-white rounded-xl shadow-sm p-4 relative">
                <div class="unread-dot"></div>
                <div class="flex items-start">
                    <div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center mr-3 flex-shrink-0">
                        <i class="fas fa-box text-green-600 text-xl"></i>
                    </div>
                    <div class="flex-1 min-w-0">
                        <div class="flex items-center justify-between mb-1">
                            <span class="text-sm font-semibold text-gray-800">库存预警</span>
                            <span class="text-xs text-gray-400">15分钟前</span>
                        </div>
                        <div class="text-sm text-gray-700 mb-1">灭火器库存不足，请及时采购</div>
                        <div class="text-xs text-gray-500">当前库存：15个 · 最低库存：30个</div>
                    </div>
                </div>
            </a>

            <!-- Unread Item 3 - Approval -->
            <a href="notification-detail.html" class="block bg-white rounded-xl shadow-sm p-4 relative">
                <div class="unread-dot"></div>
                <div class="flex items-start">
                    <div class="w-12 h-12 bg-orange-100 rounded-full flex items-center justify-center mr-3 flex-shrink-0">
                        <i class="fas fa-check-circle text-orange-600 text-xl"></i>
                    </div>
                    <div class="flex-1 min-w-0">
                        <div class="flex items-center justify-between mb-1">
                            <span class="text-sm font-semibold text-gray-800">审批结果</span>
                            <span class="text-xs text-gray-400">1小时前</span>
                        </div>
                        <div class="text-sm text-gray-700 mb-1">您的材料申领申请已通过审批</div>
                        <div class="text-xs text-gray-500">喷淋头申领 · 50个 · 已生成出库单</div>
                    </div>
                </div>
            </a>

            <!-- Read Item 1 -->
            <a href="notification-detail.html" class="block bg-gray-50 rounded-xl shadow-sm p-4">
                <div class="flex items-start">
                    <div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center mr-3 flex-shrink-0">
                        <i class="fas fa-calendar-times text-purple-600 text-xl"></i>
                    </div>
                    <div class="flex-1 min-w-0">
                        <div class="flex items-center justify-between mb-1">
                            <span class="text-sm font-semibold text-gray-600">审批通知</span>
                            <span class="text-xs text-gray-400">2小时前</span>
                        </div>
                        <div class="text-sm text-gray-600 mb-1">您有新的请假申请待审批</div>
                        <div class="text-xs text-gray-400">事假申请 · 赵工发起 · 1天</div>
                    </div>
                </div>
            </a>

            <!-- Read Item 2 -->
            <a href="notification-detail.html" class="block bg-gray-50 rounded-xl shadow-sm p-4">
                <div class="flex items-start">
                    <div class="w-12 h-12 bg-yellow-100 rounded-full flex items-center justify-center mr-3 flex-shrink-0">
                        <i class="fas fa-truck text-yellow-600 text-xl"></i>
                    </div>
                    <div class="flex-1 min-w-0">
                        <div class="flex items-center justify-between mb-1">
                            <span class="text-sm font-semibold text-gray-600">物流通知</span>
                            <span class="text-xs text-gray-400">3小时前</span>
                        </div>
                        <div class="text-sm text-gray-600 mb-1">采购单CG20240115001已发货</div>
                        <div class="text-xs text-gray-400">物流公司：XX快递 · 单号：1234567890</div>
                    </div>
                </div>
            </a>

            <!-- Read Item 3 -->
            <a href="notification-detail.html" class="block bg-gray-50 rounded-xl shadow-sm p-4">
                <div class="flex items-start">
                    <div class="w-12 h-12 bg-red-100 rounded-full flex items-center justify-center mr-3 flex-shrink-0">
                        <i class="fas fa-exclamation-triangle text-red-600 text-xl"></i>
                    </div>
                    <div class="flex-1 min-w-0">
                        <div class="flex items-center justify-between mb-1">
                            <span class="text-sm font-semibold text-gray-600">系统提醒</span>
                            <span class="text-xs text-gray-400">5小时前</span>
                        </div>
                        <div class="text-sm text-gray-600 mb-1">您的付款申请审批流程超时</div>
                        <div class="text-xs text-gray-400">供应商付款申请 · 已超过24小时未处理</div>
                    </div>
                </div>
            </a>

            <!-- Read Item 4 -->
            <a href="notification-detail.html" class="block bg-gray-50 rounded-xl shadow-sm p-4">
                <div class="flex items-start">
                    <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mr-3 flex-shrink-0">
                        <i class="fas fa-building text-blue-600 text-xl"></i>
                    </div>
                    <div class="flex-1 min-w-0">
                        <div class="flex items-center justify-between mb-1">
                            <span class="text-sm font-semibold text-gray-600">项目动态</span>
                            <span class="text-xs text-gray-400">1天前</span>
                        </div>
                        <div class="text-sm text-gray-600 mb-1">消防工程A项目进度已更新</div>
                        <div class="text-xs text-gray-400">当前进度：60% · 今日新增3人打卡</div>
                    </div>
                </div>
            </a>

            <!-- Read Item 5 -->
            <a href="notification-detail.html" class="block bg-gray-50 rounded-xl shadow-sm p-4">
                <div class="flex items-start">
                    <div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center mr-3 flex-shrink-0">
                        <i class="fas fa-check-circle text-green-600 text-xl"></i>
                    </div>
                    <div class="flex-1 min-w-0">
                        <div class="flex items-center justify-between mb-1">
                            <span class="text-sm font-semibold text-gray-600">审批结果</span>
                            <span class="text-xs text-gray-400">2天前</span>
                        </div>
                        <div class="text-sm text-gray-600 mb-1">您的采购申请已通过审批</div>
                        <div class="text-xs text-gray-400">灭火器采购 · 已生成采购单</div>
                    </div>
                </div>
            </a>
        </div>
    </div>

    <!-- Tab Content: 审批 -->
    <div id="content-approval" class="tab-content hidden">
        <div class="mt-2 space-y-2 px-4">
            <!-- Approval Notifications -->
            <a href="notification-detail.html" class="block bg-white rounded-xl shadow-sm p-4 relative">
                <div class="unread-dot"></div>
                <div class="flex items-start">
                    <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mr-3 flex-shrink-0">
                        <i class="fas fa-clipboard-check text-blue-600 text-xl"></i>
                    </div>
                    <div class="flex-1 min-w-0">
                        <div class="flex items-center justify-between mb-1">
                            <span class="text-sm font-semibold text-gray-800">待审批</span>
                            <span class="text-xs text-gray-400">2分钟前</span>
                        </div>
                        <div class="text-sm text-gray-700 mb-1">您有新的采购申请待审批</div>
                        <div class="text-xs text-gray-500">消防栓采购申请 · 王工发起</div>
                    </div>
                </div>
            </a>

            <a href="notification-detail.html" class="block bg-white rounded-xl shadow-sm p-4 relative">
                <div class="unread-dot"></div>
                <div class="flex items-start">
                    <div class="w-12 h-12 bg-orange-100 rounded-full flex items-center justify-center mr-3 flex-shrink-0">
                        <i class="fas fa-check-circle text-orange-600 text-xl"></i>
                    </div>
                    <div class="flex-1 min-w-0">
                        <div class="flex items-center justify-between mb-1">
                            <span class="text-sm font-semibold text-gray-800">审批通过</span>
                            <span class="text-xs text-gray-400">1小时前</span>
                        </div>
                        <div class="text-sm text-gray-700 mb-1">您的材料申领申请已通过审批</div>
                        <div class="text-xs text-gray-500">喷淋头申领 · 已生成出库单</div>
                    </div>
                </div>
            </a>

            <a href="notification-detail.html" class="block bg-gray-50 rounded-xl shadow-sm p-4">
                <div class="flex items-start">
                    <div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center mr-3 flex-shrink-0">
                        <i class="fas fa-calendar-times text-purple-600 text-xl"></i>
                    </div>
                    <div class="flex-1 min-w-0">
                        <div class="flex items-center justify-between mb-1">
                            <span class="text-sm font-semibold text-gray-600">待审批</span>
                            <span class="text-xs text-gray-400">2小时前</span>
                        </div>
                        <div class="text-sm text-gray-600 mb-1">您有新的请假申请待审批</div>
                        <div class="text-xs text-gray-400">事假申请 · 赵工发起</div>
                    </div>
                </div>
            </a>
        </div>
    </div>

    <!-- Tab Content: 系统 -->
    <div id="content-system" class="tab-content hidden">
        <div class="mt-2 space-y-2 px-4">
            <!-- System Notifications -->
            <a href="notification-detail.html" class="block bg-white rounded-xl shadow-sm p-4 relative">
                <div class="unread-dot"></div>
                <div class="flex items-start">
                    <div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center mr-3 flex-shrink-0">
                        <i class="fas fa-box text-green-600 text-xl"></i>
                    </div>
                    <div class="flex-1 min-w-0">
                        <div class="flex items-center justify-between mb-1">
                            <span class="text-sm font-semibold text-gray-800">库存预警</span>
                            <span class="text-xs text-gray-400">15分钟前</span>
                        </div>
                        <div class="text-sm text-gray-700 mb-1">灭火器库存不足，请及时采购</div>
                        <div class="text-xs text-gray-500">当前库存：15个 · 最低库存：30个</div>
                    </div>
                </div>
            </a>

            <a href="notification-detail.html" class="block bg-gray-50 rounded-xl shadow-sm p-4">
                <div class="flex items-start">
                    <div class="w-12 h-12 bg-yellow-100 rounded-full flex items-center justify-center mr-3 flex-shrink-0">
                        <i class="fas fa-truck text-yellow-600 text-xl"></i>
                    </div>
                    <div class="flex-1 min-w-0">
                        <div class="flex items-center justify-between mb-1">
                            <span class="text-sm font-semibold text-gray-600">物流通知</span>
                            <span class="text-xs text-gray-400">3小时前</span>
                        </div>
                        <div class="text-sm text-gray-600 mb-1">采购单CG20240115001已发货</div>
                        <div class="text-xs text-gray-400">物流公司：XX快递 · 单号：1234567890</div>
                    </div>
                </div>
            </a>

            <a href="notification-detail.html" class="block bg-gray-50 rounded-xl shadow-sm p-4">
                <div class="flex items-start">
                    <div class="w-12 h-12 bg-red-100 rounded-full flex items-center justify-center mr-3 flex-shrink-0">
                        <i class="fas fa-exclamation-triangle text-red-600 text-xl"></i>
                    </div>
                    <div class="flex-1 min-w-0">
                        <div class="flex items-center justify-between mb-1">
                            <span class="text-sm font-semibold text-gray-600">系统提醒</span>
                            <span class="text-xs text-gray-400">5小时前</span>
                        </div>
                        <div class="text-sm text-gray-600 mb-1">您的付款申请审批流程超时</div>
                        <div class="text-xs text-gray-400">供应商付款申请 · 已超过24小时未处理</div>
                    </div>
                </div>
            </a>
        </div>
    </div>

    <!-- Empty State (hidden by default) -->
    <div id="empty-state" class="hidden mt-20 text-center px-4">
        <i class="fas fa-bell-slash text-6xl text-gray-300 mb-4"></i>
        <div class="text-gray-500 text-sm">暂无消息通知</div>
    </div>

    <script>
        function switchTab(tab) {
            // Hide all content
            document.querySelectorAll('.tab-content').forEach(el => el.classList.add('hidden'));
            // Remove active from all tabs
            document.querySelectorAll('[id^="tab-"]').forEach(el => {
                el.classList.remove('tab-active', 'text-blue-600');
                el.classList.add('text-gray-500');
            });
            
            // Show selected content
            document.getElementById('content-' + tab).classList.remove('hidden');
            // Add active to selected tab
            const tabEl = document.getElementById('tab-' + tab);
            tabEl.classList.add('tab-active', 'text-blue-600');
            tabEl.classList.remove('text-gray-500');
        }

        function markAllAsRead() {
            // Remove unread dots
            document.querySelectorAll('.unread-dot').forEach(dot => dot.remove());
            // Change unread items to read style
            document.querySelectorAll('.bg-white.relative').forEach(item => {
                item.classList.remove('bg-white', 'relative');
                item.classList.add('bg-gray-50');
            });
            // Update badge counts
            document.querySelectorAll('[id^="tab-"] span').forEach(badge => {
                badge.textContent = '0';
                badge.classList.add('hidden');
            });
            
            // Show success message
            alert('已全部标记为已读');
        }
    </script>
</body>
</html>

